<template>
  <div class="user-wrapper">
    <!-- 顶部背景和头像 -->
    <div class="user-header">
      <div class="user-avatar">
        <img :src="user.userImg" alt="头像">
      </div>
      <div class="user-info">
        <div class="user-name">{{ user.userName }}{{ user.userSex|sexFilter}}</div>
      </div>
    </div>

    <!-- 订单入口 -->
    <div class="user-orders">
      <div class="orders-title">我的订单</div>
      <div class="orders-list">
        <div class="order-item" onclick="location.href='/OrderList'">
          <i class="fa fa-list"></i>
          <span>全部订单</span>
        </div>
        <div class="order-item">
          <i class="fa fa-credit-card"></i>
          <span>待付款</span>
        </div>
        <div class="order-item">
          <i class="fa fa-cutlery"></i>
          <span>待使用</span>
        </div>
        <div class="order-item">
          <i class="fa fa-commenting"></i>
          <span>待评价</span>
        </div>
      </div>
    </div>

    <!-- 其他功能入口 -->
    <ul class="user-list">
      <li onclick="location.href='/UserAddress'">
        <i class="fa fa-map-marker" ></i>
        <span>收货地址</span>
        <i class="fa fa-angle-right right-arrow"></i>
      </li>
      <li>
        <i class="fa fa-phone"></i>
        <span>联系客服</span>
        <i class="fa fa-angle-right right-arrow"></i>
      </li>
      <li>
        <i class="fa fa-cog"></i>
        <span>设置</span>
        <i class="fa fa-angle-right right-arrow"></i>
      </li>
      <li @click="log_out">
        <i class="fa fa-power-off" ></i>
        <span>退出登录</span>
        <i class="fa fa-angle-right right-arrow"></i>
      </li>
    </ul>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../components/Footer.vue';
export default {
    name: 'User',
    data() {
        return {
            user: {},
        }
    },
    created() {
        this.user = this.$getSessionStorage('user');
        
        this.$axios.post('UserController/getUserByIdByPass', this.$qs.stringify({
            userId: this.user.userId,
            password: this.user.password
        })).then(response => {
            this.user = response.data;
        }).catch(error => {
            console.error(error);
        });
    },
    methods:{
        log_out(){
            this.$removeSessionStorage('user');
            this.$removeLocalStorage('user');
            this.$router.replace({ path: '/index' });
        }
    },
    filters: {
        sexFilter(value) {
            return value == 1 ? '先生' : '女士';
        }
    },
    components: {
        Footer
    }
}
</script>

<style scoped>
.user-wrapper {
  background: #f5f5f5;
  min-height: 100vh;
}
.user-header {
  background: linear-gradient(90deg, #51b9fe 60%, #0097ff 100%);
  padding: 6vw 0 4vw 0;
  display: flex;
  align-items: center;
}
.user-avatar {
  margin-left: 6vw;
  width: 16vw;
  height: 16vw;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 2px solid #fff;
}
.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-info {
  margin-left: 4vw;
  color: #fff;
}
.user-name {
  font-size: 5vw;
  font-weight: bold;
}
.user-desc {
  font-size: 3vw;
  margin-top: 1vw;
  opacity: 0.8;
}

.user-orders {
  background: #fff;
  margin: 3vw 0;
  padding: 3vw 0 2vw 0;
}
.orders-title {
  font-size: 4vw;
  font-weight: bold;
  margin-left: 5vw;
  margin-bottom: 2vw;
}
.orders-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.order-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666;
  font-size: 3vw;
}
.order-item i {
  font-size: 6vw;
  margin-bottom: 1vw;
  color: #51b9fe;
}

.user-list {
  background: #fff;
  margin-top: 3vw;
  padding: 0;
  list-style: none;
}
.user-list li {
  display: flex;
  align-items: center;
  padding: 4vw 5vw;
  border-bottom: 1px solid #f0f0f0;
  font-size: 3.8vw;
  color: #333;
}
.user-list li i {
  font-size: 4vw;
  margin-right: 3vw;
}
.user-list .right-arrow {
  margin-left: auto;
  color: #bbb;
}
</style>